<template>
  <div class="confirm-dialog-overlay" @click="handleOverlayClick">
    <div class="confirm-dialog" :class="`dialog-${type}`" @click.stop>
      <div class="dialog-header">
        <div class="dialog-icon">
          {{ dialogIcon }}
        </div>
        <h3 class="dialog-title">{{ title }}</h3>
      </div>
      
      <div class="dialog-body">
        <p class="dialog-message">{{ message }}</p>
      </div>
      
      <div class="dialog-actions">
        <button 
          class="btn btn-cancel"
          @click="handleCancel"
        >
          {{ cancelText }}
        </button>
        <button 
          class="btn btn-confirm"
          :class="`btn-${type}`"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

/**
 * 确认对话框组件
 * 提供用户确认操作的对话框界面
 * @component
 * @example
 * <ConfirmDialog 
 *   title="删除确认" 
 *   message="确定要删除吗？" 
 *   @confirm="handleConfirm" 
 *   @cancel="handleCancel" 
 * />
 */

interface Props {
  title: string
  message: string
  confirmText?: string
  cancelText?: string
  type?: 'info' | 'warning' | 'danger'
  closeOnOverlay?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  confirmText: '确认',
  cancelText: '取消',
  type: 'warning',
  closeOnOverlay: true
})

const emit = defineEmits<{
  confirm: []
  cancel: []
}>()

/**
 * 对话框图标
 */
const dialogIcon = computed(() => {
  switch (props.type) {
    case 'info':
      return 'ℹ️'
    case 'warning':
      return '⚠️'
    case 'danger':
      return '🚨'
    default:
      return '❓'
  }
})

/**
 * 处理确认操作
 */
const handleConfirm = (): void => {
  emit('confirm')
}

/**
 * 处理取消操作
 */
const handleCancel = (): void => {
  emit('cancel')
}

/**
 * 处理遮罩层点击
 */
const handleOverlayClick = (): void => {
  if (props.closeOnOverlay) {
    emit('cancel')
  }
}
</script>

<style lang="scss" scoped>
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: $spacing-lg;
  animation: fadeIn 0.2s ease-out;

  .confirm-dialog {
    background: $bg-primary;
    border-radius: $border-radius-lg;
    max-width: 500px;
    width: 100%;
    box-shadow: $shadow-lg;
    animation: slideIn 0.3s ease-out;

    &.dialog-info {
      border-top: 4px solid $secondary-color;
    }

    &.dialog-warning {
      border-top: 4px solid $warning-color;
    }

    &.dialog-danger {
      border-top: 4px solid $danger-color;
    }

    .dialog-header {
      display: flex;
      align-items: center;
      gap: $spacing-md;
      padding: $spacing-lg $spacing-lg $spacing-md;

      .dialog-icon {
        font-size: 2rem;
        flex-shrink: 0;
      }

      .dialog-title {
        color: $text-color;
        font-size: 1.3rem;
        font-weight: bold;
        margin: 0;
      }
    }

    .dialog-body {
      padding: 0 $spacing-lg $spacing-lg;

      .dialog-message {
        color: $text-secondary;
        line-height: 1.5;
        margin: 0;
        font-size: 1rem;
      }
    }

    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: $spacing-md;
      padding: $spacing-md $spacing-lg $spacing-lg;
      border-top: 1px solid rgba(0, 0, 0, 0.1);

      .btn {
        padding: $spacing-sm $spacing-lg;
        border: none;
        border-radius: $border-radius-md;
        cursor: pointer;
        transition: $transition-normal;
        font-size: 0.9rem;
        font-weight: 500;
        min-width: 80px;

        &.btn-cancel {
          background: $bg-secondary;
          color: $text-color;
          border: 1px solid #ddd;

          &:hover {
            background: darken($bg-secondary, 5%);
            transform: translateY(-1px);
          }
        }

        &.btn-confirm {
          color: white;

          &.btn-info {
            background: $secondary-color;

            &:hover {
              background: darken($secondary-color, 10%);
            }
          }

          &.btn-warning {
            background: $warning-color;

            &:hover {
              background: darken($warning-color, 10%);
            }
          }

          &.btn-danger {
            background: $danger-color;

            &:hover {
              background: darken($danger-color, 10%);
            }
          }

          &:hover {
            transform: translateY(-1px);
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// 响应式设计
@media (max-width: $breakpoint-sm) {
  .confirm-dialog-overlay {
    padding: $spacing-md;

    .confirm-dialog {
      .dialog-header {
        padding: $spacing-md $spacing-md $spacing-sm;
        flex-direction: column;
        text-align: center;
        gap: $spacing-sm;

        .dialog-title {
          font-size: 1.2rem;
        }
      }

      .dialog-body {
        padding: 0 $spacing-md $spacing-md;
        text-align: center;
      }

      .dialog-actions {
        flex-direction: column-reverse;
        padding: $spacing-sm $spacing-md $spacing-md;

        .btn {
          width: 100%;
          margin: 0;
        }
      }
    }
  }
}
</style>